<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>

<!--<link rel="stylesheet" th:href="@{../../static/plugin/layui/css/layui.css}">-->
<link rel="stylesheet" th:href="@{../../static/css/style.css}"/>
<!--<script th:src="@{../../static/js/jquery.js}"></script>-->
<script type="text/javascript" th:src="@{../../static/js/jquery-3.1.1.min.js}"></script>
<script th:src="@{../../static/js/ajaxfileupload.js}"></script>
<script th:src="@{../../static/plugin/layui/layui.all.js}"></script>
<script th:src="@{../../static/js/wangEditor.min.js}"></script>
<script th:src="@{../../static/js/vue.js}"></script>
<body>
<div th:replace="~{fragments/header :: header}">...</div>
<div id="editor">

</div>
<form method="POST" enctype="multipart/form-data" action="/upload">
    <table>
        <tr><td>File to upload:</td><td><input type="file" name="file" /></td></tr>
        <tr><td></td><td><input type="submit" value="Upload" /></td></tr>
    </table>
</form>
<div class="aboutBox">
    <div>
        <p><span>身份证正面：</span>
            <span>
			<a href="#">选择照片</a>
			<input type="file" id="studentPhoto" name="studentPhoto"/>
			<input type="hidden" value="" id="cardnoPosUrl" name="cardnoPosUrl"/>
			</span>
        </p>
        <img src="" id="cardnoPosUrlShow" alt="">
    </div>
</div>
<div>
    <div class="col-sm-3">
        <label>上传头像</label>
    </div>
    <div class="col-sm-8" >
        <img id="image" class="cover-radius" src="../../static/img/upload_img.png"
             style="cursor: pointer;" width="200px" onclick="byId('picture_upload').click()"/>
        <input id="picture_upload" name="file" type="file" onchange="upload_cover(this,'image')"
               style="opacity: 0; cursor: pointer;"/>
    </div>
</div>
<form id="listForm" action="/file/listPage" method="post" th:object="${query}">
    <input id="pageNum" name="pageInfo.pageNum" th:field="${query.pageIndex}" />
    <input  id="pageSize" name="pageInfo.pageSize" th:field="${query.pageSize}" />
    <input type="submit" value="提交">
</form>

<div>
    <table style="border:1px" class="table table-sm table-striped">
        <thead>
        <tr>
            <td>ID</td>
            <td>FileName</td>
            <td>NowName</td>
            <td>SavePath</td>
            <td>Url</td>
            <td>FileType</td>
            <td>FileSize</td>
            <td>UploadTime</td>
            <td>预览</td>
        </tr>
        </thead>
        <tbody>
        <tr th:if="${pageInfo.list.size()} eq 0">
            <td colspan="3">暂时无文件信息~~</td>
        </tr>
        <tr th:each="file : ${pageInfo.list}">
            <td th:text="${file.id}"></td>
            <td><a th:href="'files/'+${file.id}" th:text="${file.filename}"/></td>
            <td th:text="${file.nowname}"></td>
            <td th:text="${file.savepath}"></td>
            <td th:text="${file.url}"></td>
            <td th:text="${file.filetype}"></td>
            <td th:text="${file.filesize}"></td>
            <td th:text="${file.uploadtime}"></td>
            <td>
                <img style="height:50px;height:50px" th:src="'/files/'+${file.id}">
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div style="width: 100%">
<!--    <div style="width:500px;margin:auto;" id="page" th:include="~{fragments/page :: page}"-->
<!--         url="/file/listPage">-->
<!--    </div>-->
    <hr>
    <div style="width:500px;margin:auto;">当前第<span th:text="${pageInfo.getPageNum()}">1</span>页，共<span th:text="${pageInfo.getPages()}">1</span>页，共计<span
            th:text="${pageInfo.getTotal()}">1</span>条数据
    </div>
    <div  th:include="~{fragments/pageInfo :: pagin ('listForm')}">
    </div>
</div>

<div th:replace="~{fragments/footer :: footer}">...</div>
</body>
<script>
    function byId(id) {
        return document.getElementById(id);
    }
    //上传图片JS
    function upload_cover(obj,imageId) {
        if (image_check(obj.id)) { //自己添加的文件后缀名的验证
            $.ajaxFileUpload({
                fileElementId: obj.id,    //需要上传的文件域的ID，即<input type="file">的ID。
                url: '/upload', //后台方法的路径
                type: 'post',   //当要提交自定义参数时，这个参数要设置成post
                dataType: 'json',   //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
                secureuri: false,   //是否启用安全提交，默认为false。
                async: true,   //是否是异步
                success: function (data) {
                    //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
                    console.info(data)
                    $("#"+imageId).attr("src", data.data.url);
                },
                error: function (data, status, e) {  //提交失败自动执行的处理函数。
                    console.error(e);
                }
            });
        }
    }
    function image_check(feid) { //自己添加的文件后缀名的验证
        var img = document.getElementById(feid);
        return /.(jpg|png|gif|bmp)$/.test(img.value) ? true : (function () {
            alert('图片格式仅支持jpg、png、gif、bmp格式，且区分大小写。');
            return false;
        })();
    }

    //调用uploadCommon.js
    $(".aboutBox").delegate("#studentPhoto", "change", function () {
        UploadifyFileCommon.uploadOneImage("studentPhoto", "cardnoPosUrlShow", 'cardnoPosUrl', "personal");
    });

    //上传图片封装方法   uploadCommon.js
    var UploadifyFileCommon = {
        /**
         * @param FileDivId  上传文件的File 如：<input type="file" id="file" name="file" />
         * @param showUrlId  显示图片的img  如： <img src=""  id="showImg" alt="">
         * @param saveUrlId  保存图片的相对路径 如：/enterprise/1232122.jpg
         * @param uploadType  图片的业务类型  如个人图片 personal
         * @returns {boolean}
         */
        uploadOneImage: function (FileDivId, showUrlId, saveUrlId, uploadType) {
            //设置domain
            document.domain = "localhost";
            $.ajaxFileUpload
            (
                {
                    url: 'http://127.0.0.1:8081/upload', //用于文件上传的服务器端请求地址
                    secureuri: false, //一般设置为false
                    fileElementId: FileDivId, //文件上传空间的id属性  <input type="file" id="file" name="file" />
                    data: {//加入的文本参数
                        "uploadType": uploadType
                    },
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        //服务器地址
                        var serverUrl = "http://127.0.0.1:8081/upload";

                        if (data == "error") {
                            alert("上传图片失败");
                            return false;
                        }
                        //回显图片完整地址
                        $("#" + showUrlId).attr("src", serverUrl + data);
                        //赋值图片上传绝对路劲
                        $("#" + saveUrlId).val(data);
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        console.log(data);
                    }
                }
            );
            return false;
        }
    };
</script>

<script>
    var E = window.wangEditor
    var editor = new E('#editor')
    editor.customConfig.showLinkImg = false
    editor.customConfig.uploadImgServer = '/upload' //配置上传到服务器地址
    editor.customConfig.customUploadImg = function(files, insert) { //对上传的图片进行处理，图片上传的方式
        var data = new FormData()
        data.append("file", files[0])
        $.ajax({
            url: "/upload",
            type: "post",
            data: data,
            processData: false,
            contentType: false,
            success: function(data) {
                console.log(data)
                var imgUrl = data.data.url
                //这里是对图片格式进行处理，我这里因为是要保存到本地服务器上，将图片前缀修改
                editor.cmd.do('insertHTML',
                    '<img style="width: 200px;height: 200px;" src="' +
                    imgUrl + '" alt="">')
            },
            error: function() {
                alert("图片上传错误")
            }
        })
    }
    editor.create()
</script>
</html>
